<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: DataTable + DataSource.IO + XML Data</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: DataTable + DataSource.IO + XML Data</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
    <p>This example shows how to populate a DataTable with data from the Yahoo! Local webservice retrieved via a same-domain script. First we create a DataSource.IO instance pointing to data, then using the DataTableDataSource plugin we can load data for Chinese restaurants near our office.</p>

    <p>In this example, we set the <code>initialRequest</code> value in the DataTableDataSource plugin constructor so that the initial data is loaded first and then the DataTable is rendered in a separate call.</p>

    <p><strong>Note:</strong> XML parsing currently has known issues on the Android WebKit browser.
</div>

<div class="example yui3-skin-sam">
<style scoped>
/* custom styles for this example */
.dt-example {margin:1em;}

/* css to counter global site css */
.dt-example th {text-transform:none;}
.dt-example table {width:auto;}
.dt-example caption {display:table-caption;}
</style>

<div id="chinese" class="dt-example"></div>

<script type="text/javascript">
YUI().use("datasource-io", "datasource-xmlschema","datatable-base","datatable-datasource", function (Y) {
    var cols = ["Title", "Phone", "Rating"];
    ds = new Y.DataSource.IO({
        source:"../assets/datatable/ylocal.xml?"})
        .plug(Y.Plugin.DataSourceXMLSchema, {
            schema: {
                resultListLocator: "Result",
                resultFields: [
                    {
                        key:"Title",
                        locator:"*[local-name() ='Title']"
                    },
                    {
                        key:"Phone",
                        locator:"*[local-name() ='Phone']"
                    },
                    {
                        key:"Rating",
                        locator:"*[local-name()='Rating']/*[local-name()='AverageRating']",
                        // The data contains "NaN" for unrated restaurants
                        parser: function (val) {
                            return isNaN(val) ? '(none)' : val;
                        }
                    }
                ]
            }
        }),
    dt = new Y.DataTable.Base({columnset:cols, summary:"Chinese restaurants near 98089", caption:"Table with XML data from same-domain script"})
        .plug(Y.Plugin.DataTableDataSource, {datasource:ds, initialRequest:"zip=94089&query=chinese"});

    ds.after("response", function() {
        dt.render("#chinese")}
    );
});
</script>

</div>

<h2>Populating Your DataTable with Remote Data using DataSource.IO</h2>

<p>Your table can be easily populated with XML data from your back-end by creating a DataSource instance and using the DataTableDataSource plugin to load the data into a DataTable.</p>

<p>Start with the <code>use()</code> statement:</p>

<pre class="code prettyprint">YUI().use(&quot;datasource-io&quot;, &quot;datasource-xmlschema&quot;, &quot;datatable-datasource&quot;, function(Y) {
});</pre>


<p>Next create a DataSource.IO instance pointing to your data. (Note that in order to point the Yahoo! Local webservice, you would need to bypass cross-domain browser restrictions on XHR by creating a locally served proxy. You do not need to implement such a proxy when your data is accessed from the same domain.) Define the correct schema for the DataSourceJSONSchema plugin. This is a good time to call <code>sendRequest</code> to make sure the data returns as expected.</p>

<pre class="code prettyprint">var dataSource = new Y.DataSource.IO({
    source:&quot;ylocal_proxy.php?zip=94089&amp;query=chinese&quot;
});

dataSource.plug(Y.Plugin.DataSourceXMLSchema, {
    schema: {
        resultListLocator: &quot;Result&quot;,
        resultFields: [
            {key:&quot;Title&quot;, locator:&quot;*[local-name() =&#x27;Title&#x27;]&quot;},
            {key:&quot;Phone&quot;, locator:&quot;*[local-name() =&#x27;Phone&#x27;]&quot;},
            {key:&quot;Rating&quot;, locator:&quot;*[local-name()=&#x27;Rating&#x27;]&#x2F;*[local-name()=&#x27;AverageRating&#x27;]&quot;}
        ]
    }
});

dataSource.sendRequest({    
    callback: {
        success: function (e) {
            Y.log(e);
        }
    }
});</pre>


<p>Now that the DataSource is created properly, define the columns that you want your table to show. These columns map directly to the parameter names returned in the data.</p>

<pre class="code prettyprint">var cols = [&quot;Title&quot;, &quot;Phone&quot;, &quot;Rating&quot;];</pre>


<p>Now you are ready to create a DataTable using the columns you have defined. When you plug the instance with the DataTableDataSource plugin, point to your DataSource instance, and set an <code>initialRequest</code> value so that the initial data loads right way. Then call <code>render()</code> after the data response has been processed.</p>

<pre class="code prettyprint">var cols = [&quot;Title&quot;, &quot;Phone&quot;, &quot;Rating&quot;];

var dataSource = new Y.DataSource.IO({
    source:&quot;ylocal_proxy.php?zip=94089&amp;query=chinese&quot;
});

dataSource.plug(Y.Plugin.DataSourceXMLSchema, {
    schema: {
        resultListLocator: &quot;Result&quot;,
        resultFields: [
            {key:&quot;Title&quot;, locator:&quot;*[local-name() =&#x27;Title&#x27;]&quot;},
            {key:&quot;Phone&quot;, locator:&quot;*[local-name() =&#x27;Phone&#x27;]&quot;},
            {key:&quot;Rating&quot;, locator:&quot;*[local-name()=&#x27;Rating&#x27;]&#x2F;*[local-name()=&#x27;AverageRating&#x27;]&quot;}
        ]
    }
});

var table = new Y.DataTable.Base({
    columnset: cols,
    summary: &quot;Chinese restaurants near 98089&quot;,
    caption: &quot;Table with XML data from same-domain script&quot;
});
table.plug(Y.Plugin.DataTableDataSource, {
    datasource: dataSource,
    initialRequest: &quot;&quot;
});

dataSource.after(&quot;response&quot;, function() {
    table.render(&quot;#pizza&quot;)}
);</pre>


<p>One final change you can make is to split the URL between the DataSource <code>source</code> value and the <code>request</code> value sent to the DataTableDataSource plugin. Splitting the URL this way facilitates making future requests to the same DataSource.

<p>Here's the code to run the whole example:</p>

<pre class="code prettyprint">YUI().use(&quot;datasource-get&quot;, &quot;datasource-jsonschema&quot;, &quot;datatable-datasource&quot;, function(Y) {
    var cols = [&quot;Title&quot;, &quot;Phone&quot;, &quot;Rating&quot;];

    var dataSource = new Y.DataSource.IO({
        source: &quot;ylocal_proxy.php?&quot;
    });

    dataSource.plug(Y.Plugin.DataSourceXMLSchema, {
        schema: {
            resultListLocator: &quot;Result&quot;,
            resultFields: [
                {key:&quot;Title&quot;, locator:&quot;*[local-name() =&#x27;Title&#x27;]&quot;},
                {key:&quot;Phone&quot;, locator:&quot;*[local-name() =&#x27;Phone&#x27;]&quot;},
                {key:&quot;Rating&quot;, locator:&quot;*[local-name()=&#x27;Rating&#x27;]&#x2F;*[local-name()=&#x27;AverageRating&#x27;]&quot;}
            ]
        }
    });

    var table = new Y.DataTable.Base({
        columnset: cols,
        summary: &quot;Chinese restaurants near 98089&quot;,
        caption: &quot;Table with XML data from same-domain script&quot;
    });
    
    table.plug(Y.Plugin.DataTableDataSource, {
        datasource: dataSource,
        initialRequest: &quot;zip=94089&amp;query=chinese&quot;
    });

    dataSource.after(&quot;response&quot;, function() {
        table.render(&quot;#pizza&quot;)}
    );

    &#x2F;&#x2F; Make another request later
    &#x2F;&#x2F;table.datasource.load({request:&quot;zip=94089&amp;query=pizza&quot;});
});</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="This example illustrates simple DataTable use cases.">
                                        <a href="datatable-basic.html">Basic DataTable</a>
                                    </li>
                                
                            
                                
                                    <li data-description="DataTable loaded with JSON data from a remote webservice via DataSource.Get">
                                        <a href="datatable-dsget.html">DataTable + DataSource.Get + JSON Data</a>
                                    </li>
                                
                            
                                
                                    <li data-description="DataTable loaded with XML data from a remote webservice via DataSource.IO.">
                                        <a href="datatable-dsio.html">DataTable + DataSource.IO + XML Data</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Custom format data for display.">
                                        <a href="datatable-formatting.html">Formatting Row Data for Display</a>
                                    </li>
                                
                            
                                
                                    <li data-description="DataTable with nested column headers.">
                                        <a href="datatable-nestedcols.html">Nested Column Headers</a>
                                    </li>
                                
                            
                                
                                    <li data-description="DataTable with column sorting.">
                                        <a href="datatable-sort.html">Column Sorting</a>
                                    </li>
                                
                            
                                
                                    <li data-description="DataTable with vertical and/or horizontal scrolling rows.">
                                        <a href="datatable-scroll.html">Scrolling DataTable</a>
                                    </li>
                                
                            
                                
                            
                        </ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                                    <li data-description="Shows how to instantiate multiple Panel instances, and use nested modality to interact with a Datatable.">
                                        <a href="../panel/panel-form.html">Creating a modal form</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
